<template>
  <div class="water"
    :style="{ height: item.height + 'px', backgroundColor: item.background, left: item.left + 'px', top: item.top + 'px' }"
    v-for="item in waterList">

  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

const props = defineProps<{
  items: {
    background: string,
    height: number
  }[]
}>()
const waterList = reactive<{
  height: number,
  background: string,
  left: number,
  top: number
}[]>([])
let waterHeight: number[] = []
const init = () => {
  let columnCount = Math.floor(document.body.clientWidth / 130)
  for (let i = 0; i < props.items.length; i++) {
    if (i < columnCount) {
      waterList.push({
        height: props.items[i].height,
        background: props.items[i].background,
        left: i * 130,
        top: 0
      })
      waterHeight[i] = props.items[i].height
    } else {
      let minHeight = Math.min(...waterHeight)
      let index = waterHeight.indexOf(minHeight)
      let el = {
        height: props.items[i].height,
        background: props.items[i].background,
        left: waterList[index].left,
        top: minHeight + 10 + waterList[index].top
      }
      waterList.push(el)
      waterHeight[index] = el.top + 10 + el.height
    }
  }
}

onMounted(() => {
  init()
})

</script>

<style lang='scss' scoped>
.water {
  position: absolute;
  width: 110px;
}
</style>